.sx__time-input {
  --sx-color-time-input-bg: #f1f0f0;

  width: 100px;
  font-size: 2rem;
  background-color: var(--sx-color-time-input-bg);
  color: var(--sx-internal-color-text);
  border-radius: var(--sx-rounding-small);
  border: none;
  padding: var(--sx-spacing-padding3);
  text-align: center;

  .is-dark & {
    --sx-color-time-input-bg: #444141;
  }

  &:focus {
    background-color: var(--sx-color-secondary-container);
    outline: 3px solid var(--sx-color-primary);
  }
}
